<template>
  <div class="auxiliarymonitorMap">
    <div id="auxiliarymonitorMap"></div>
    <!-- <div class="lenged">
      <div class="startbox">
        <img src="../../assets/img/HomePage/sfxm2.png" alt srcset />
        <span>正常</span>
      </div>
      <div class="startbox">
        <img src="../../assets/img/HomePage/sfxm.png" alt srcset />
        <span>异常</span>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import maptalks from "./maptalks";
import { log } from "three";
//loadsh
import lodash from "lodash";
@Component
export default class extends Vue {
  mapviews: any = null;
  public click(val: any, path: string): void {
    // 点击触发事件
    // console.log(val);
    // console.log(path);
    if (val.myData) {
      var item: any = {
        code: val.myData.BDZID,
        name: val.myData.BDZMC,
      };
      AuxiliaryMonitorModule.setStationName(item);
      this.$router.push({
        path: "/auxiliarymonitor/firefight",
        query: item,
      });
    }
  }
  private mounted(): void {
    this.mapviews = new maptalks("auxiliarymonitorMap");
    this.mapviews.addClickEvent(this.click);
    this.queryMapXY();
  }
  // 表格数据查询
  queryIntegrageAlarmList() {
    let gjly = ["xfxt", "afxt", "hjjc", "zmxt", "jps"];
    let gjlyFetch = gjly.map((v) => {
      let from = {
        gjly: v,
        clzt: 0,
        page: 1,
        size: 200,
      };
      return (this as any).$services.queryIntegrageAlarmList({
        data: from,
        method: "get",
      });
    });
    Promise.all(gjlyFetch).then((res) => {
      let mapDataErr = [];
      res.forEach((item) => {
        let resultdata = item.data || {};
        let records = resultdata.records || [];
        records.forEach((item) => {
          mapDataErr.push(item.BDZID);
        });
      });
      mapDataErr = [...new Set(mapDataErr)];

      this.mapDataErr = mapDataErr;
    });
  }
  // get getterStationState() {
  //   let getterStationState = lodash.cloneDeep(
  //     GetSocketModule.getterStationState
  //   );

  //   console.log(
  //     "GetSocketModule.getterStationState:",
  //     GetSocketModule.getterStationState
  //   );
  //   return getterStationState;
  // }
  // @Watch("getterStationState", { deep: true })
  // watchGetterStationState(newData, oldData) {
  //   let successData = newData.success;
  //   let errData = newData.err;
  //   console.log("newData:", newData);

  //   if (successData && successData.length) {
  //     this.updateMarkerSuccessState(successData);
  //   }
  //   if (errData && errData.length) {
  //     // 这里做假数据了
  //     // if (errData.indexOf("1500000001") >= 0) {
  //     //   errData = ["1500000001"];
  //     //   this.updateMarkerErrState(errData);
  //     //   return false;
  //     // }
  //     // 这里是真的
  //     // 以右侧设备预警报到的变电站为准，更新地图上的异常点
  //     let errArr = [];
  //     this.alarmList.map((v, i) => {
  //       errArr.push(v.stationId);
  //     });
  //     errArr = [...new Set(errArr)];
  //     console.log("errArr:", errArr);
  //     this.updateMarkerErrState(errArr);
  //     // this.updateMarkerErrState(errData);
  //   }
  // }
  // 右侧设备预警报到的变电站
  // get alarmList() {
  //   var allList = GetSocketModule.AllAuxiliaryPointer || [];
  //   // console.log('allList:',allList);
  //   // 筛出辅控五个系统的数据
  //   let fkdata = ["01", "02", "04", "05", "06"];
  //   var arr = [];
  //   allList.forEach((k, j) => {
  //     if (k.isGj === "gj" && fkdata.indexOf(k.xtValue) > -1) {
  //       if (k.time && k.message) {
  //         arr.push(k);
  //       }
  //     }
  //   });
  //   arr = arr.slice(0, 50);
  //   // console.log(arr);
  //   return arr;
  // }
  // 更新变电站状态为正常运行
  updateMarkerSuccessState() {
    let arr = this.mapDataSuccess;
    let getErrMarkerObj = this.mapviews.getErrMarkerObj();
    arr.forEach((v) => {
      let item = getErrMarkerObj[v];
      if (item) {
        this.mapviews.updateMarkerSuccessState(item);
      }
    });
  }
  // 更新变电站状态为异常运行
  updateMarkerErrState() {
    let arr = this.mapDataErr;
    let getErrMarkerObj = this.mapviews.getSuccessMarkerObj();
    // console.log("getErrMarkerObj:", getErrMarkerObj);
    // console.log("11111arr:", arr);

    arr.forEach((v) => {
      let item = getErrMarkerObj[v];
      if (item) {
        this.mapviews.updateMarkerErrState(item);
      }
    });
  }
  mapDataAll = [];
  @Watch("mapDataAll")
  setAllMap() {
    this.mapviews.addnormal(this.mapDataAll);
  }
  mapDataSuccess: any = [];
  @Watch("mapDataSuccess")
  setSuccessMap() {
    // console.log("辅助设备this.mapDataSuccess:", this.mapDataSuccess);
    this.updateMarkerSuccessState();
  }
  mapDataErr: any = [];
  @Watch("mapDataErr")
  setErrMap() {
    this.updateMarkerErrState();
  }
  queryMapXY() {
    (this as any).$services
      .queryMapXY()
      .then((result: any) => {
        // console.log("辅助设备result.data:", result.data);

        this.mapDataAll = result.data;
        this.queryIntegrageAlarmList();
        // 接口加字段，异常变电站也从这边取 mapDataErr
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.auxiliarymonitorMap {
  width: 100%;
  height: 100%;
  position: relative;
  .lenged {
    position: absolute;
    bottom: 0.2rem;
    right: 0.3rem;
    font-size: 0.18rem;
    img {
      width: 0.3rem;
      height: 0.3rem;
    }
  }
  #auxiliarymonitorMap {
    width: 100%;
    height: 100%;
  }
}
</style>

